@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --color-primary: #0071E3;
  --color-primary-50: #E8F4FF;
  --color-primary-100: #D1E9FF;
  --color-primary-200: #A3D3FF;
  --color-primary-300: #75BDFF;
  --color-primary-400: #47A6FF;
  --color-primary-500: var(--color-primary);
  --color-primary-600: #0058B3;
  --color-primary-700: #004282;
  --color-primary-800: #002C52;
  --color-primary-900: #001631;

  --color-secondary: #86868B;
  --color-secondary-50: #F8F8F8;
  --color-secondary-100: #F0F0F0;
  --color-secondary-200: #E7E7E7;
  --color-secondary-300: #D1D1D1;
  --color-secondary-400: #AEAEAE;
  --color-secondary-500: var(--color-secondary);
  --color-secondary-600: #676769;
  --color-secondary-700: #494949;
  --color-secondary-800: #2D2D2D;
  --color-secondary-900: #151515;
}

@layer base {
  body {
    @apply antialiased text-secondary-800 dark:text-secondary-100 bg-white dark:bg-secondary-900 transition-colors duration-300;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-medium tracking-tight;
    line-height: 1.2;
  }
  
  h1 {
    @apply text-4xl md:text-5xl lg:text-6xl;
  }
  
  h2 {
    @apply text-3xl md:text-4xl lg:text-5xl;
  }
  
  h3 {
    @apply text-2xl md:text-3xl;
  }
  
  h4 {
    @apply text-xl md:text-2xl;
  }
  
  p {
    @apply text-base md:text-lg leading-relaxed;
  }
  
  small {
    @apply text-sm;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-6 py-3 text-base font-medium rounded-apple transition-all duration-300 ease-apple;
  }
  
  .btn-primary {
    @apply btn bg-primary-500 hover:bg-primary-600 text-white shadow-sm hover:shadow-md;
  }
  
  .btn-secondary {
    @apply btn bg-secondary-100 hover:bg-secondary-200 dark:bg-secondary-800 dark:hover:bg-secondary-700 text-secondary-900 dark:text-secondary-100;
  }
  
  .btn-outline {
    @apply btn border-2 border-primary-500 text-primary-500 hover:bg-primary-50 dark:hover:bg-primary-900/20;
  }
  
  .container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  .card {
    @apply rounded-apple bg-white dark:bg-secondary-800 shadow-apple dark:shadow-apple-dark hover:shadow-apple-hover dark:hover:shadow-apple-dark-hover transition-all duration-300 ease-apple overflow-hidden;
  }
}